<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
  </head>
  
  <body>
    <form>
      <table>
        <p style="color: blue"><b> &nbsp;&nbsp; 欢迎注册会员</b></p>
        <!-- <tr>       作为表格会显得突兀，中间有明显空格
         <td>  <p style="color: blue;"> <b> &nbsp;&nbsp; 欢迎注册会员</b></p></td>
    </tr> -->
        <tr>
          <td>
            <label for="ph"><b>手机号码：</b></label>
          </td>
          <td>
            <input
              id="ph"
              name="ph"
              maxlength="11"
              placeholder="11位手机号"
              required
            />
            <span style="color: red" >必填</span>
          </td>
         
          <!-- <td><p style="color: red;">必填</p></td>  p标签会自动换行 -->
          <!-- <p style="color: red;">必填</p>      文字会独立于--01
      <span>bitian</span> -->
        </tr>
        <tr>
          <td>
            <label for="password"><b>创建密码：</b></label>
          </td>
          <td>
            <input
              id="password"
              type="password"
              name="password "
              maxlength="8"
              placeholder="8位密码"
              required
            />
            <span style="color: red" >必填</span>
          </td>
         
        </tr>
        <tr>
          <td>
            <label for="em"><b>注册邮箱：</b></label>
          </td>
          <td>
            <input
              id="em"
              type="email"
              name="em"
              placeholder="例如:wustzz@sina.com"
              required
            />
            <span style="color: red" >必填</span>
          </td>
        
        </tr>
        <!-- <tr>
          <td><b>&nbsp;&nbsp;&nbsp; 验证码：</b></td>
        </tr> -->
        <tr>
  <td style="padding-left:2em"><b>验证码：</b></td>
  <td>
    <input type="text" id="captchaInput" maxlength="4" >
    <canvas id="captchaCanvas" width="70" height="24" style="border:1px solid #ccc; vertical-align:middle; background-color: blueviolet;"></canvas>
    <a href="javascript:;" onclick="drawCaptcha()" style="font-size:20px; margin-left:6px;"> 🔄️</a>
    <span id="captchaMsg" style="color:red; display:none;">验证码错误</span>
  </td>
</tr>
        <tr>
          <td style="padding-left: 2em"><b>性别：</b></td>
          <!-- 直接在 <td> 上统一缩进： -->
          <td>
            <label><input type="radio" name="sex" value="man" />男</label>
            <label><input type="radio" name="sex" value="woman" />女</label>
          </td>
        </tr>
        <tr>
          <td style="padding-left: 2em">
            <label for="birthday"><b>生日：</b></label>
          </td>
          <td>
            <input id="birthday" name="birthday" value="&nbsp; 年&nbsp/月/日" />
          </td>
        </tr>
        <tr>
          <td style="padding-left: 2em">
            <label for="age"><b>年龄：</b></label>
          </td>
          <td colspan="2">
            <input id="age" name="age" />
          </td>
        </tr>

        <tr>
          <td style="padding-left: 2em">
            <label for="native place"><b>籍贯：</b></label>
          </td>
          <td>
            <select size="1">
              <option value="0" selected="selected">湖北省</option>
              <option value="1">直辖市</option>
              <option value="2">湖南省</option>
              <option value="3">特别行政区</option>
            </select>
            <select size="1" style="width: 80px">
              <option value="0" selected="selected">武汉</option>
              <option value="1">上海</option>
              <option value="2">长沙</option>
              <option value="3">澳门</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><b>个人学历：</b></td>
          <td>
            <select style="width: 170px">
              <option value="0" selected="select">本科</option>
              <option value="1">高子</option>
              <option value="2">博士</option>
              <option value="3">研究生</option>
            </select>
          </td>
        </tr>
<!-- <tr>
<td style="padding-left: 2em"><b>月薪：</b></td>
<td>

  形状永远是圆形、颜色永远是系统默认。 
   <input  type="range"  style="border-radius:0;" id="salary" name="salary" min="0" max="10000" step="100" value="5000">
  <span id="msg"></span>
</td>
</tr> -->
<tr>
  <td style="padding-left:2em"><b>月薪：</b></td>
  <td>
    <input type="range" id="salary" name="salary" min="0" max="10000" step="100" value="5000"
           style="width:100px; height:4px; background:#ccc; border-radius:0;
                  -webkit-appearance:none; appearance:none; outline:none">
    <!-- 滑块矩形灰白 -->
    <style>
      #salary::-webkit-slider-thumb{width:6px;height:16px;background:#ddd;border:1px solid #FFF;border-radius:0;-webkit-appearance:none}
      #salary::-moz-range-thumb{width:6px;height:16px;background:#ddd;border:1px solid #ddd;border-radius:0}
    </style>
    <span id="msg">5000</span> 
  </td>
</tr>

<tr>
  <td><b>个人爱好：</b></td>
  <td>
    <label>
<input type="checkbox" name="like" value="sing" >唱
</label>
<label>
<input type="checkbox" name="like" value="dance" >跳
</label>
<label>
<input type="checkbox" name="like" value="rap" >rap
</label>
<label>
<input type="checkbox" name="like" value="basketball">篮球
</label>
  </td>
</tr>

<tr>
  <td><b>个人照片：</b></td>
  <td>
    <input type="file" value="选择文件">
  </td>
</tr>
<tr>
  <td><b>个人简历：</b></td>
  <td>
    <textarea name="personIntr" cols="30" rows="10"></textarea>
  </td>
</tr>

        <tr>
          <td></td>
          <!-- 左边空着，右边放按钮 -->
          <td><button>提交</button>
       
          <button>重填</button>
          </td>
          
        </tr>
      </table>
    </form>
    <script>
/* ====== 画验证码 ====== */
function drawCaptcha() {
  const canvas = document.getElementById('captchaCanvas');
  const ctx = canvas.getContext('2d');
  const chars = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
  let code = '';
  for (let i = 0; i < 4; i++) code += chars[Math.floor(Math.random() * chars.length)];

  // 存到隐藏字段，供后面校验
  document.getElementById('captchaCanvas').dataset.code = code;

  // 画背景
  ctx.fillStyle = '#C9C';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 画干扰线
  for (let i = 0; i < 3; i++) {
    ctx.strokeStyle = '#ccc';
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
  }

  // 画文字
  ctx.font = 'bold 18px monospace';
  ctx.fillStyle = '#00F';
  for (let i = 0; i < code.length; i++) {
    ctx.save();
    ctx.translate(12 + i * 14, 16);
    ctx.rotate((Math.random() - 0.5) * 0.2);
    ctx.fillText(code[i], 0, 0);
    ctx.restore();
  }
}

/* ====== 表单提交前校验 ====== */
document.querySelector('form').addEventListener('submit', function (e) {
  const userInput = document.getElementById('captchaInput').value.trim().toUpperCase();
  const realCode = document.getElementById('captchaCanvas').dataset.code;
  const msg = document.getElementById('captchaMsg');

  if (userInput !== realCode) {
    e.preventDefault();   // 阻止提交
    msg.style.display = 'inline'; // 显示错误
    drawCaptcha();        // 自动换一张
    document.getElementById('captchaInput').value = '';
  } else {
    msg.style.display = 'none';   // 隐藏错误
  }
});

/* ====== 页面加载后自动生成第一张 ====== */
drawCaptcha();
var msg = document.getElementById("msg"); // 根据id值找到span元素
window.onload = function () { 
msg.innerHTML = document.getElementById("salary").value; // 获取区间域初始value值
}
document.getElementById("salary").onchange = function () { 
msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
}

</script>
  </body>
</html>
